@prefix-sideMenuItem: ~'@{nameSpace}-sideMenuItem';

.@{prefix-sideMenuItem} {
  .flex();
  .align-center();
  .cursor-pointer();
  width: 100%;
  height: 56px;
  padding-right: 24px;
  color: var(--design-text-color-5);
  gap: 15px;
  transition: all var(--animation-time-base);

  .@{prefix-sideMenuItem}-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &:hover {
    background-color: var(--design-base-color-4);
  }
}

.@{prefix-sideMenuItem}-active {
  background-color: var(--design-base-color-4);
}